<%@page contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<link href="resources/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet"
	type="text/css" />
<script src="resources/ztree/jquery.ztree.all-3.1.min.js"
	type="text/javascript"></script>
<script src="resources/jquery.json-2.3.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
	var setting = {
		check : {
			enable : true
		},
		data : {
			simpleData : {
				idKey : "id",
				pIdKey : "parent_id",
				enable : true
			}
		}
	};

	function loadMenuTree() {
		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			url : "${ctx}/rolemenu/dotree/${id}",//请求的action路径  
			error : function() {//请求失败处理函数  
				alert('请求失败');
			},
			success : function(data) { //请求成功后处理函数。    
				var treeObj = $.fn.zTree
						.init($("#rolemenutree"), setting, data);
				treeObj.expandAll(true);
			}
		});

	}

	$(document).ready(function() {
		loadMenuTree();
		$("#btnRoleMenu").click(function() {
			var treeObj = $.fn.zTree.getZTreeObj("rolemenutree");
			var nodes = treeObj.transformToArray(treeObj.getNodes());
			var trees = new Array()
			for ( var i = 0; i < nodes.length; i++) {
				var tree = {};
				tree.id = nodes[i]["id"];
				tree.parent_id = nodes[i]["parent_id"];
				tree.name = nodes[i]["name"];
				tree.checked = nodes[i]["checked"];
				trees[i] = tree;
			}
			var jsonData = $.toJSON(trees);
			$.ajax({
				async : false,
				cache : false,
				type : 'POST',
				dataType : 'json',
				contentType : 'application/json;charset=utf-8',
				data : jsonData,
				url : "${ctx}/rolemenu/savetree",//请求的action路径  
				error : function() {//请求失败处理函数  
					alert('请求失败');
				},
				success : function(result) {
					alert(result.msg);
				}
			});

		});
	});
</SCRIPT>
	<div class="tabs" currentIndex="0" eventType="click">
		<div class="tabsHeader">
			<div class="tabsHeaderContent">
				<ul>
					<li><a href="javascript:;"><span>角色对应模块</span></a></li>
					<li><a href="javascript:;"><span>角色对应用户</span></a></li>
				</ul>
			</div>
		</div>
		<div class="tabsContent" layoutH="95" >
			<div>
				<div class="zTreeDemoBackground left">
					<ul id="rolemenutree" class="ztree"></ul>
					<div class="formBar">
					<ul>
						<li><div class="buttonActive">
								<div class="buttonContent">
									<button type="button" id="btnRoleMenu">保存角色菜单</button>
								</div>
							</div>
							</li>
					</ul>
					</div>
				</div>
			</div>
			<div>
				<div class="zTreeDemoBackground left">
					<c:if test="${fn:length(userlist)==0}">
					该用户无对应角色信息	
					</c:if>
					<c:if test="${fn:length(userlist)>0}"><ul>	 
						<c:forEach var="item" items="${userlist}" varStatus="menu">
							<li>${item.name}</li>
						</c:forEach>
						</ul>	
					</c:if>	   
				</div>
			</div>
		</div>
		<div class="tabsFooter">
			<div class="tabsFooterContent">
			</div>
		</div>
	</div>